import React, { useEffect, useState } from "react";
import * as echarts from "echarts";

const VerticalBar: React.FC<any> = ({ VerticalBarData }) => {
  let [VerticalBar_chart] = useState<echarts.ECharts>();

  //   useEffect(()=>{
  //     console.log(VerticalBarData);

  //       },[VerticalBarData])
  useEffect(() => {
    VerticalBar_chart = echarts.init(
      document.getElementById("VerticalBar_chart") as HTMLElement
    );

    // 构建option配置对象
    const options = {
      // X轴展示数据
      xAxis: {
        type: "category",
        data: VerticalBarData.servers.map(
          (item: { name: string }) => item.name
        ),
        axisLabel: {
          color: "#9EB1C8",
        },
      },
      // y轴展示数据
      yAxis: {
        type: "value",
        show: false,
        max: function (value: any) {
          return value.max * 1.2;
        },
      },
      // 图表绘制的位置，对应 上下左右
      grid: {
        top: 16,
        right: 0,
        bottom: 26,
        left: -26,
        containLabel: true,
      },
      // 核心
      series: [
        {
          type: "bar",
          data: VerticalBarData.servers.map(
            (item: { name: any; value: any }) => ({
              name: item.name,
              value: item.value,
            })
          ),
          itemStyle: {
            color: "#479AD3",
            borderRadius: 5, // 修改：使用 borderRadius 替换 barBorderRadius
            shadowColor: "rgba(0,0,0,0.3)",
            shadowBlur: 5,
          },
          barWidth: 12,
          label: {
            show: true,
            position: "top",
            color: "#fff", // 修改：将 textStyle 中的 color 直接配置到 label 下面
            formatter: "{c}%",
          },
        },
      ],
    };

    VerticalBar_chart.setOption(options);
  }, [VerticalBarData]);

  return (
    <div className="w-full h-full">
      <div>【服务资源占用比】</div>
      <div id="VerticalBar_chart" className="w-full h-full"></div>
    </div>
  );
};
export default VerticalBar;
